<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考试详情</title>
		<link rel="stylesheet" type="text/css" href="http://localhost:8080/css/bootstrap.min.css" />
		<style type="text/css">
			body {
				background-color: #EEEEEE;
			}

			.container {
				background-color: white;
			}

			.top {
				height: 50px;
				background-color: #000000;
				text-align: center;
			}

			.top span {
				line-height: 50px;
				color: #fff;

			}

			.btn-group {
				margin-top: 10px;
			}

			.content {
				margin-top: 20px;
			}

			.content div {
				margin-top: 20px;
			}

			.content div p:first-child {
				background-color: #0056B3;
				color: #fff;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<span>在线考试系统</span>
		</div>
		<div class="container">
			<div id="header">
				<div class="row">
					<div class="btn-group">
						<button class="btn btn-default" type="button" onClick="history.go(-1);">返回上一个页面</button>
						<button class="btn btn-default" type="button" onClick="location.reload()">刷新</button>
					</div>
				</div>
			</div>

			<div class="content" id="content">

			</div>

		</div>
	</body>

	<script src="http://localhost:8080/js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var href = location.href; //获取url地址
		var href1 = href.substr(-6) //截取后6位eid
		//获取试卷题目
		var exam = (function() {
			var result;
			$.ajax({
				type: 'get',
				url: `/v1/students/exam/${href1}`,
				async: false,
				success: function(data) {
					result = data.data;
				}
			});
			return result;
		})();
		// console.log(exam)

		var test = JSON.parse(exam[0].e_sj)
		// console.log(test)
		
		//获取学生提交的答案
		var answer = (function() {
			var result;
			$.ajax({
				type: 'get',
				url: `/v1/students/studentexaminfo/${href1}`,
				async: false,
				success: function(data) {
					result = data.data;
				}
			});
			return result;
		})();

		answer = JSON.parse(answer.answer)
		// console.log(answer)

		for (var a = 0; a < test.length; a++) {
			var questionItems = test[a].questionItems.split(';')
			// console.log(questionItems)

			document.getElementById('content').innerHTML += `
								<div id=div${a}>
									<p>第${test[a].questionId}题</p>
									<p>${test[a].questionTitle}</p>
									<p><input type="radio" value="A"  disabled/>A:${questionItems[0]}</p>
									<p><input type="radio" value="B"  disabled/>B:${questionItems[1]}</p>
									<p><input type="radio" value="C"  disabled/>C:${questionItems[2]}</p>
									<p><input type="radio" value="D"  disabled/>D:${questionItems[3]}</p>
									<p>正确答案:${test[a].questionAnswer}</p>
								</div>
								`
			for (var i = 0; i < answer.length; i++) {
				$(`#div${i} p input[value =${answer[i]}]`).prop('checked', true); //根据答案选中单选框
				// $(`#div${i} p input[value =${answer[i]}]`).parent().css('background-color','green');
				$("input[type='radio']:checked").parent().css('background-color', '#90EE90'); //根据选中态来给父级变色
			}
		}
	</script>
</html>
